/**
* @description:  通信网管出入工单 --> 待审批详情、审批拒绝详情、待执行详情、已完成详情
* @author: zhangxia
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back :title="formData.auditStatusName" @goBack="goBack"/>
    <!-- banner -->
    <view class="top-banner">
      <view class="left-banner">
        <text class="left-banner-title">{{formData.updateName}}发起的通信网管出入工单</text>
        <text class="left-banner-time">{{formData.updateTime}}</text>
      </view>
      <view :class="stateColor">{{formData.auditStatusName}}</view>
    </view>
    <!-- main   -->
    <main :class="{'mainHeight':formData.auditStatusName === '待执行' || formData.auditStatusName === '已完成' || controlBtn === ''}">
		<van-form>
			<view class="commonbj">
				<van-field input-align="right" v-model="formData.guardianName" label="作业监护人" readonly />
			</view>
			<div class="commontitle isrequired">
				操作人员
			</div>
			<view class="commonbj">
				<van-field input-align="right" v-model="formData.memberName" label="班组成员" readonly />
				<van-field input-align="right" label="其他单位成员" readonly />
			</view>
			<van-collapse v-model="activeNames">
			 <view class="commonbj"  v-for="(item,key) in operatorList" :key="key">
			 	<van-collapse-item :name="item.name" right-icon="cross" @click-right-icon="">
			 		<template #title>
			 		  <view class="custom-title">
			 		    {{ item.type }}
			 		  </view>
			 		</template>
			 		  <van-field input-align="right" v-model="item.userName" label="姓名" readonly  />
			 		  <van-field input-align="right" v-model="item.unitName" label="单位名称" readonly />
			 		  <van-field input-align="right" v-model="item.phone" label="联系方式" readonly />
			 		  <van-field input-align="right" v-model="item.idNumber" label="身份证号" readonly />
			 	</van-collapse-item>
			 </view>
			</van-collapse>
      <view class="remark-info-container">
        <view>工作内容</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <van-field type="textarea" readonly class="remark-text" v-model="formData.workContent" placeholder="这里是工作内容信息"  :rules="[{ required: true, trigger:'onSubmit'}]"/>
        </div>
      </view>
      <van-field input-align="right" v-model="formData.planIntoTime" label="计划进入时间"   readonly />
      <van-field input-align="right" v-model="formData.planLeaveTime" label="计划结束时间"   readonly />
			<div class="commontitle">
				审批进度
			</div>
			<view class="approval-info-container">
        <van-steps direction="vertical"
                   :active="approvalActive"
                   active-color="#417adc"
                   inactive-color="#417adc"
                   active-icon="circle"
                   inactive-icon="circle">
          <van-step v-for="(item,key) in setpList" :key="key">
            <p><span v-if="item.currentNodeTime">{{ item.currentNodeTime }}</span><span style="color: #417ADC">{{item.currentNodeName}}</span></p>
            <p>
              <span>{{item.currentStatusName}}：{{ item.currentUserName }}</span>
            </p>
            <p class="opinion" v-if="item.currentNodeContent">
              <span>审批意见：</span>
              <span>{{ item.currentNodeContent }}</span>
            </p>
            <p class="opinion" v-if="item.realityIntoTime">
              <span>实际进入时间：</span>
              <span>{{ item.realityIntoTime }}</span>
            </p>
            <p class="opinion" v-if="item.realityLeaveTime">
              <span>实际离开时间：</span>
              <span>{{ item.realityLeaveTime }}</span>
            </p>
          </van-step>
        </van-steps>
			</view>
		</van-form>
    </main>
	<footer v-if="showBtn">
	  <van-button block @click="submit">{{ buttonText }}</van-button>
	</footer>
  </view>
</template>
<script>
import {mapGetters} from "vuex";
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../common/plateTitle.vue'
import moment from "moment/moment";
import {Dialog} from "vant";
export default {
  name: 'detailsPendingApproval',
  components: { navBar,plateTitle},
  props: {},
  data() {
    return {
      formData:{
        updateName:'', // 创建人名称
        updateTime:'',//当前操作人时间
        auditStatusName:'',// 当前状态
        guardianName:'',// 作业监护人
        memberName:'',// 班组成员
        workContent:'',
        planIntoTime:'',
        planLeaveTime:'',
      },
      activeNames:["1"],
      operatorList:[],
      approvalActive: 0,
		  setpList:[],
      stateCode:'3',
		  webmasterId:'',
      backstageId:'',
      showBtn:false,
      againId:'',// 再次提交id
	  prevPage:''
    };
  },
  onLoad(options){
    this.backstageId = options.userId;
	this.prevPage = options.pagetype;
  	switch(options.state){
  		case "0":this.formData.auditStatusName = "待审批";break;
  		case "1":this.formData.auditStatusName = "审批拒绝";break;
  		case "2":this.formData.auditStatusName = "待执行";break;
  		case "3":this.formData.auditStatusName = "已完成";break;
  		case "4":this.formData.auditStatusName = "已撤销";break;
  	}
	  this.webmasterId = options.webmasterId;
    this.stateCode = options.state;
	  this.selectNetworkManagementDetail();
  },
  computed: {
    ...mapGetters(['userData']),
    stateColor() {
      if(this.stateCode === '0') {
        return 'left-state-dsp'
      }else if(this.stateCode === '1') {
        return 'left-state-jj'
      }else if(this.stateCode === '2') {
        return 'left-state-dzx'
      }else if(this.stateCode === '3') {
        return 'left-state-ywc'
      }else {
        return 'left-state-ycx'
      }
    },
    // 判断样式 及 按钮是否显示
    controlBtn() {
      if(this.userData.USERID === this.backstageId && this.prevPage === 'initial') {
        this.showBtn = true
        return '待审批'
      }else{
        this.showBtn = false
        return ''
      }
    },
    // 判断按钮
    buttonText() {
      if(this.formData.auditStatusName === '待审批') {
        return '撤销'
      }else if(this.formData.auditStatusName === '已撤销' || this.formData.auditStatusName === '审批拒绝') {
        return '再次提交'
      }
    },
  },
  watch: {},
  mounted() {

  },
  methods: {
	  selectNetworkManagementDetail(){
		  let params = {
		    webmasterId:this.webmasterId
		  }
		  this.$api.selectNetworkManagementDetail(params).then(res => {
        this.againId = res.data.webmasterId
        this.formData = res.data
        this.formData.updateTime = moment(this.formData.updateTime).format('YYYY-MM-DD HH:mm')
        this.formData.planIntoTime = moment(this.formData.planIntoTime).format('YYYY-MM-DD HH:mm')
        this.formData.planLeaveTime = moment(this.formData.planLeaveTime).format('YYYY-MM-DD HH:mm')
        this.operatorList = res.data.otherPersonnelVo.map(item=>{
			this.activeNames.push(item.name)
			return item;
		})
        this.setpList = res.data.approvalVo.map(item => {
          item.currentNodeTime = item.currentNodeTime ? moment(item.currentNodeTime).format('YYYY-MM-DD HH:mm'):''
          item.realityIntoTime = item.realityIntoTime ? moment(item.realityIntoTime).format('YYYY-MM-DD HH:mm'):''
          item.realityLeaveTime = item.realityLeaveTime ? moment(item.realityLeaveTime).format('YYYY-MM-DD HH:mm'):''
          return {...item}
        })
        this.approvalActive = res.data.currNode
		  })
	  },
    // 返回
    goBack() {
      uni.navigateBack()
    },
    submit() {
      if(this.buttonText === '撤销'){
        Dialog.confirm({
          message:'是否确认撤销'
        }).then(()=> {
          let params = {
            updateUid: this.userData.USERID,
            updateName: this.userData.SUERNAME,
            webmasterId: this.webmasterId
          }
          this.$api.cancelWebMaster(params).then(res => {
            if(res.code == 0) {
              uni.navigateTo({
                url: `/pages/operationApprove/index/index`
              })
            }
          })
        })
      }else{
        // 审批拒绝 再次提交
        Dialog.confirm({
          message:'是否确认再次提交'
        }).then(()=> {
          uni.navigateTo({
            url: `/pages/operationApprove/communicationNetWork/initiateApplication?typeName=${'again'}&againId=${this.againId}`
          })
        })
      }
    },
  }
};
</script>
<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;
  .top-banner {
    width: px2vw(1080);
    height: px2vh(190);
    background: #fff;
    margin-bottom: px2vw(30);
    .left-banner {
      width: px2vw(600);
      margin-top: px2vh(47);
      height: px2vh(98);
      float: left;
      margin-left: px2vh(50);
      .left-banner-title {
        display: block;
        font-size: px2vw(42);
        color: #417ADC;
      }
      .left-banner-time {
        font-size: px2vw(36);
        color: #666;
      }

    }
    .left-state-dsp,
    .left-state-ywc,
    .left-state-jj,
    .left-state-dzx,
    .left-state-ycx{
      width: px2vw(220);
      height: px2vh(80);
      margin-right: px2vh(30);
      margin-top: px2vh(55);
      float: right;
      font-size: px2vw(42);
      font-weight: 700;
      border-radius: px2vw(40);
      text-align: center;
      line-height: px2vh(80);
    }
    .left-state-ywc {
      color: #3CDA68;
      background: rgba(60,218,104,.1);
    }
    .left-state-dsp {
      color: #FFAD0E;
      background: rgba(255,173,14,.1);
    }
    .left-state-jj {
      color: #FF7070;
      background: rgba(255,112,112,.1);
    }
    .left-state-dzx {
      color: #417ADC;
      background: rgba(65,122,220,.1);
    }
    .left-state-ycx {
      color: #8C8C8C;
      background: rgba(140,140,140,.1);
    }
  }
  main {
    width: calc(100% - #{px2vw(60)});
    margin-left:px2vw(30);
    height: calc(100vh - #{px2vh(590)});
    overflow-x: auto;
	.commonbj{
		background-color: #fff;
		margin-bottom: px2vh(30);
		.custom-title {
		  display: flex;
		  align-items: center;

		  img {
		    width: px2vh(42);
		    margin-right: px2vw(29);
		  }
		}
	}
	.commontitle{
		font-size: px2vh(40);
		color: #666666;
		font-weight: bold;
		margin-top: px2vh(60);
		margin-bottom: px2vh(27);
	}
    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);

      .remark-wrap {
        border-radius: px2vw(20);

        .remark-text {
          height: px2vh(150);
        }
      }
    }
	.isrequired::before{
		content: "*";
		color: #FF4355;
		display: inline-block;

	}
	.approval-info-container {
	  border-radius: $border-radius-base;
	  overflow: hidden;
	  background-color: #FFFFFF;

	  /deep/ .van-cell__title {
	    color: #666;
	  }

	  /deep/ .van-cell__value {
	    color: #333;
	  }
	}
	.approval-info-container {
	  .van-steps {
	    .van-step.van-step--process {
	      /deep/.van-icon::before {
	        border-radius: 50%;
	        color: #417adc;
	        background-color: #417adc;
	      }
	    }
	    .van-step {
	      /deep/.van-icon::before {
	        border: 2px;
	        border-radius: 50%;
	        color: #417adc;
	        background-color: #fff;
	      }
	      p {
	        margin-bottom: 4px;
	        color: #ababab;
	      }
	      p:nth-child(1) {
	        display: flex;
	        justify-content: space-between;
	        //width: px2vw(300);
	        color: #333;
	      }
	      .opinion {
	        display: flex;
	        span:nth-child(1) {
	          min-width: 70px;
	        }
	      }
	    }
	  }}
  }
  .mainHeight{
  	  height: calc(100vh - #{px2vh(420)});
  }
  footer {
    height: px2vh(155);
    background: #f2f6fa;
    padding-top: px2vh(45);
    /deep/ .van-button {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vh(30);
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }
}
</style>


